import { defineComponent, ref } from "vue";
import Field from "@/components/Field";
import { IFormItem, IFormTypeData } from "../../types";
import { Picker, Popup } from "vant";
export default defineComponent({
  name: "",
  props: {
    modelValue: {
      type: String,
      default: "",
    },
    item: {
      type: Object as () => IFormItem,
      default: () => {
        return {};
      },
    },
    typeData: {
      type: Array as () => IFormTypeData[],
      default: () => [],
    },
  },
  emits: ["change"],
  setup(props, { emit }) {
    const showModal = ref(false);
    const selectedValues = ref([]);
    return () => {
      const onConfirm = () => {
        emit("change", selectedValues.value.join(","));
        showModal.value = false;
      };
      const renderModal = () => {
        return (
          <Popup v-model:show={showModal.value} round position="bottom">
            <Picker
              v-model={selectedValues.value}
              title="请选择地区"
              onCancel={() => (showModal.value = false)}
              onConfirm={onConfirm}
              columns={props.typeData.map((e) => ({
                text: e.label,
                value: e.value,
              }))}
            />
          </Popup>
        );
      };
      return (
        <div>
          <Field
            name={props.modelValue ? "已选择" : "请选择"}
            isLink={true}
            onClick={() => {
              showModal.value = true;
            }}
          />
          {renderModal()}
        </div>
      );
    };
  },
});
